<template>

  <div class="page">
		<!-- 横向分布 justify-content:flex-start-->
		<!-- 纵向居中align-items:center -->
		<div style="z-index: 2;display: flex;justify-content: flex-start;
			background-color: rgb(243, 244, 246);
			height: 11%;
			position: fixed;top: 0;left: 0;width: 100%;
			border-bottom:0.5px solid #c3b2bb;align-items: center;">
			<div style="font-size: 20px;margin-left: 0px;height: 11vh;
			text-align: center;width: 100px;line-height: 11vh;
			cursor: pointer;" @click="gotoHome()">Aria</div>
			<form
				style="display: flex;align-items: center;margin-left: 150px;height: 11vh;display: flex;justify-content: flex-start;">
				<div class="inputBox">
					<input id="inputtop" type="text" placeholder="">
				</div>
				<span style="width: 10px;"></span>
				<div class="inputBox">
					<input type="submit" value="检索">
				</div>
			</form>
			<span style="width: 20%;"></span>
			<div style="height: 11vh;align-items: center;line-height: 11vh;">{{this.$store.state.borderflag}}</div>
			<span style="width: 5%;"></span>
			<el-dropdown @command="handleCommand">
				<span class="el-dropdown-link">
					<i class="el-icon-arrow-down el-icon--right" style="color: #000000;"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="a">个人中心</el-dropdown-item>
					<el-dropdown-item command="b">门户系统</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<div style="line-height: 11vh;">欢迎，{{this.$store.username}}</div>
			<button class="logout" style="height: 40px;position: absolute;right:30px;">退出登录</button>
			
		</div>

    <div class="inf">
      <div class="content" style="float: left; margin-top:5em">
    	<h3 style="text-align: center">门户</h3>
    	<el-menu>
     	 <el-menu-item index="1" @click="gotoLaunched()">
        	<i class="el-icon-user"></i>
        	<span slot="title">已发布</span>
      	</el-menu-item>
     	 <el-menu-item index="2" @click="gototolaunch()">
        	<i class="el-icon-star-on"></i>
        	<span slot="title">发布</span>
      	</el-menu-item>
       	<el-menu-item index="3" @click="displayperson()">
        	<i class="el-icon-s-cooperation"></i>
        	<span slot="title">查看个人资料</span>
      	</el-menu-item>
       	</el-menu-item>
        <el-menu-item index="4" @click="displaySCI()">
        <i class="el-icon-s-custom"></i>
        <span slot="title">科研活动</span>
      </el-menu-item>
    </el-menu>
	</div></div>
			<br>
			<br>
			<br>
			
		<ProvedPerson style="margin-left:26%; margin-top:6%" v-show="dataVisible === true" ></ProvedPerson>
		<div style="margin-left:26%; margin-top:6%" v-show="SCIdata === true">
		<div v-for="(d,index) in this.$store.state.essaylist" :key="index">
			<p class="align-center">{{index}}</p>
	      <SCI :index="index" :form="d"></SCI>
    </div>
		</div>
    </div>
      
    
</div>

	

</template>

<script>
import ProvedPerson from './provedperson.vue'
import SCI from './SCI.vue'
	export default {
		components:{
			ProvedPerson,
			SCI,
		},
		data() {
			return {
				eraselist: [],
				dataVisible:true,
				SCIdata:false,
                allComponents:[{
					        name:'宵宫',
            phone:'1314520',
            telling:'体验烟火，品味人生',
            actstate:'线下会议',
            actform:'点燃烟火，收集鸣草，提高命座'
				},
				{
					        name:'宵宫',
            phone:'1314520',
            telling:'体验烟火，品味人生',
            actstate:'线下会议',
            actform:'点燃烟火，收集鸣草，提高命座'}]
			}
		},
		methods: {
			ShowItem(v){
      this.showitem = v.toString();
      this.$emit("filepadchoice", this.showitem);
    },
			gotoHome(){
					this.$router.push('/')
			},
			// gotoMsg() {
			// 	this.$router.push('/personalpage/personmsg')
			// },
			// gotoColl() {
			// 	this.$router.push('/personalpage/collect')
			// },
			changeflag(flag) {
				if (flag === true) {
					this.$store.state.divflag = false;
				} else {
					this.$store.state.divflag = true;
				}
			},
			handleCommand(command) {
				if (command === "a") {
					this.$router.push('/personalpage')
				} else if (command === "b") {
					this.$router.push("/scholarpage");
				}
			},
			gotoPerson(){
				this.$router.push('/personalpage/personmsg')
			},
			gotoLaunched(){
				this.$router.push('/personallaunched')
			},
			gototolaunch(){
				this.$router.push('/tolaunch')
			},
			displayperson(){
				this.dataVisible=true
				this.SCIdata=false
			},
			getCookie(name) {
				var value = '; ' + document.cookie
				var parts = value.split('; ' + name + '=')
				if (parts.length === 2) return parts.pop().split(';').shift()
			},
			displaySCI(){
				   const self = this;
      	self.axios({
       			   method: 'post',
       			 url: '/show_research/',
        		 data: {
          		 user_id: this.$store.state.username,
        		},
        	headers: {'X-CSRFToken':
              	this.getCookie('csrftoken')
        	},
      	}).then(res => {
        	console.log(res.data);
        	const obj = res.data;
        	this.SetEssayList(obj.essayCollection);
			this.dataVisible=false
				this.SCIdata=true
        }).catch(err => {
        	console.log(err);
        	this.SetEssayList(this.testlist);
        	this.$message("获取发布活动信息失败")
        })
				
		},
		SetEssayList(list){
      		let i;
      		this.$store.state.essaylist.splice(0, this.$store.state.essaylist.length);
      		for(i = 0; i < list.length; i++){
        	this.$store.state.essaylist.push({telling: list[i].name, actstate: list[i].region, actform: list[i].desc});
      }
    },

		}
	};
</script>

<style>
	.content{
  		width: 20em;
	}
	.item {
  		margin-top: -1em;
 	 	margin-right: 2em;
	}
	.onleft {
		margin-left: 6.5%;
		width: 93.5%
	}

	.onright {
		margin-left: 17%;
		width: 83%
	}

	.shell {
		position: absolute;
		left: 0;
		width: 6.5%;
		height: 75vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: rgb(17, 24, 39);
		border-top-left-radius: 0em;
		border-top-right-radius: 0em;
		border-bottom-right-radius: 1em;
		border-bottom-left-radius: 1em;
		transition: .3s;
		overflow: hidden;
	}

	.box {
		height: 1%;
		width: 85%;
	}

	.box {
		display: block;
		justify-content: center;
		align-items: center;
		height: 15%;
		width: 85%;
		margin: 9px;
		border-radius: 5px;
		position: relative;
		transition: .3s;
		color: rgb(160, 160, 175);
	}

	.box i {
		font-size: 30px;
		position: absolute;
		margin: 15px 0 0 20px;
		/* margin-left: 30%;
		margin-top: 30%; */
	}

	.box:nth-child(1) {
		height: 0px;
	}

	.box:nth-child(1)::after,
	.box:nth-child(5)::before {
		content: '';
		display: block;
		width: 100%;
		height: 2px;
		background-color: rgb(55, 65, 81);
		position: absolute;
		bottom: -10px;
	}

	.box span {
		position: relative;
		top: 30%;
		left: 40%;
		font-size: 15px;
		opacity: 0;
		transition: .1s;
	}

	.shell:hover {
		width: 17%;
	}

	.shell:hover .contain {
		margin-left: 200px;
	}

	.box:hover {
		background-color: rgb(55, 65, 81);
	}

	.shell:hover span {
		opacity: 1;
	}

	.box:hover {
		color: #fff;
	}

	.shell:nth-child(2) {
		background-color: rgb(243, 244, 246);
	}

	.shell:nth-child(2) .box:hover {
		background-color: rgb(209, 213, 219);
		color: rgb(135, 140, 241);
	}

	.shell:nth-child(2) .box {
		color: #000;
	}

	.shell:nth-child(3) {
		background-color: rgb(49, 46, 129);
	}

	.shell:nth-child(3) .box:hover {
		background-color: rgb(67, 56, 202);
	}

	.shell:nth-child(3) .box {
		color: rgb(140, 120, 240);
	}

	.inputBox input {
		width: 100%;
		padding: 10px 20px;
		background: rgba(91, 91, 91, 0.2);
		outline: none;
		border: none;
		border-radius: 30px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-right: 1px solid rgba(255, 255, 255, 0.2);
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		font-size: 16px;
		letter-spacing: 1px;
		color: #191919;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	}

	.inputBox input:nth-child(2) {
		justify-content: center;
		align-items: center;
	}

	.inputBox input::placeholder {
		color: #191919;
	}

	.inputBox input[type="submit"] {
		background: #fff;
		color: #666;
		width: 75px;

		/* margin-bottom: 20px; */
		font-weight: 600;
		cursor: pointer;
	}

	.logout {
		background: rgba(91, 91, 91, 0.2);
		outline: none;
		border: none;
		border-radius: 30px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-right: 1px solid rgba(255, 255, 255, 0.2);
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		font-size: 16px;
		letter-spacing: 1px;
		color: #191919;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		background: #fff;
		color: #666;
		width: 100px;
		/* margin-bottom: 20px; */
		font-weight: 600;
		cursor: pointer;
	}
</style>
